var banners=document.getElementsByClassName('banner');
var contents=document.querySelector('.contents')
var lightFlag=document.querySelector('.lightFlag')

var data=[
                ['3月13日版本更新公告','【刘备-浪漫序章新皮肤免费送】活动攻略来啦!','五五限时玩法【势力对决】现已上线体验服','体验服爆料|新玩法势力对决来啦，王者礼册系统福利加码'],
                ['3月13日版本更新公告','3月12日外挂专项打击公告','3月12日“演员”专项打击公告','3月12日言语违规专项打击处罚公告'],
                ['【刘备-浪漫序章新皮肤免费送】活动攻略来啦!','娜可露露新增飞跃墙体效果，进场手段更丰富!','英雄平衡性调整|元流之子坦克降温，娜可露露平衡','五五限时玩法【势力对决】现已上线体验服'],
                ['【奇幻梦之旅-送刘备新皮肤】活动开启公告','刘备新皮肤免费送!多重施法即将上线','节日限免&戈娅新皮肤免费送!阿轲-化蝶舞新皮肤上架','玫蓝誓约-送戈娅新皮肤】活动公告及FAQ'],
                ['开赛倒计时1天12支战队整装待发，2025K甲春季赛即将','2025年王者荣耀甲级职业联赛(K甲)春季赛赛事规则','战队巡礼】JLY、MD、常山UUG、东莞Wz新赛季火力','战队巡礼昔日王者再闯巅峰，郑州MTG、XYG、BOA蓄力']
            ]

// 设置初始化内容
for(let i=0;i<data[0].length;i++){
    let content=document.createElement('div')
    content.className='content'
    content.innerText=`${i+1}、${data[0][i]}`
    contents.appendChild(content)
}


for(let i=0;i<banners.length;i++){
    let banner=banners[i]

    // 对每个小标题设置一个键值对{index:i}
    banner.setAttribute('index',i);

    // 设置一个鼠标移入事件
    banner.onmouseenter=function(){
        // 获取之前设置的键值对的下标
        let index=banner.getAttribute('index')
        // 在鼠标移入相应小标题时下面的光标的位置计算
        lightFlag.style.left=`${16*index}%`

        changeContent(index)
    }
}




function changeContent(index){
    let content=document.getElementsByClassName('content')
    for(let i=0;i<data[index].length;i++){
        contents.remove(content[i])
    }
    for(let i=0;i<data[index].length;i++){
        let content=document.createElement('div')
        content.className='content'
        content.innerText=`${i+1}、${data[index][i]}`
        contents.appendChild(content)
    }




    // var change=data[index]

    // for(let i=0;i<contents.length;i++){
    //     var content=contents[i]
    //     content.innerText=`${i+1}、${change[i]}`;
    // }
}